<template>
	<view class="coupons-page">
		<!-- 导航栏 -->
		<uni-nav-bar 
			:fixed="true" 
			:status-bar="true" 
			title="优惠券" 
			left-icon="left" 
			background-color="#007AFF"
			color="#ffffff"
			:border="false"
			:shadow="false"
			@clickLeft="goBack">
		</uni-nav-bar>

		<!-- 导航栏下容器 -->
		<view class="nav-container"></view>

		<!-- 主要内容区域 -->
		<view class="content">
			<view class="coupons-list">
				<view 
					class="coupon-item" 
					v-for="(coupon, index) in couponList" 
					:key="index"
					@click="selectCoupon(index)">
					<!-- 卡片内容 -->
					<view class="coupon-content" :class="{ 'selected': selectedIndex === index }">
						<!-- 上部分 -->
						<view class="coupon-top-section">
							<!-- 左右两部分内容 -->
							<view class="coupon-main-content">
								<!-- 左部分：限制文字和条件 -->
								<view class="coupon-left-part">
									<view class="coupon-top">
										<text class="coupon-limit">{{ coupon.limit }}</text>
									</view>
									<text class="coupon-condition">{{ coupon.condition }}</text>
								</view>
								<!-- 右部分：金额 -->
								<view class="coupon-right-part">
									<text class="coupon-amount-symbol">¥</text>
									<text class="coupon-amount">{{ coupon.amount }}</text>
								</view>
							</view>
						</view>

						<!-- 中间部分：分割线 -->
						<view class="coupon-divider"></view>

						<!-- 下部分 -->
						<view class="coupon-bottom">
							<text class="coupon-validity">有效期至: {{ coupon.validity }}</text>
							<view class="coupon-use">
								<text class="coupon-use-text">去使用</text>
								<uni-icons type="right" size="14" color="#ffffff"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	
	const couponList = ref([
		{
			limit: '仅限于XX加油站使用',
			condition: '满200元可用',
			amount: '20',
			validity: '2020.04.11—2023.05.11'
		},
		{
			limit: '通用',
			condition: '满200元可用',
			amount: '20',
			validity: '2020.04.11—2023.05.11'
		},
		{
			limit: '仅限于XX加油站使用',
			condition: '满200元可用',
			amount: '20',
			validity: '2020.04.11—2023.05.11'
		}
	])
	
	const selectedIndex = ref(-1)
	
	const goBack = () => {
		uni.navigateBack()
	}
	
	const selectCoupon = (index) => {
		selectedIndex.value = index
		const selectedCoupon = couponList.value[index]
		// 通过事件总线发送选中的优惠券金额
		uni.$emit('couponSelected', {
			amount: selectedCoupon.amount,
			coupon: selectedCoupon
		})
		// 延迟返回，让用户看到选中效果
		setTimeout(() => {
			uni.navigateBack()
		}, 300)
	}
</script>

<style lang="scss" scoped>
	.coupons-page {
		min-height: 100vh;
		background-color: #ffffff;
		padding-bottom: 20px;
	}

	.nav-container {
		height: 100px;
		background-color: #007AFF;
		width: 100%;
	}

	.content {
		padding-top: 0;
		margin-top: -110px;
		padding: 15px;
	}

	/* 优惠券列表 */
	.coupons-list {
		margin-top: 20px;
		background-color: #ffffff;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 15px;
	}

	.coupon-item {
		position: relative;
		height: 120px;
		margin-bottom: 15px;
		border-radius: 10px;
		box-sizing: border-box;
		overflow: visible;
		background-image: url('/static/椭圆 3 拷贝@2x.png');
		background-size: 100% 120px;
		background-position: center;
		background-repeat: no-repeat;
	}

	.coupon-bg {
		position: absolute;
		top: 0;
		left: 10px;
		right: 10px;
		width: calc(100% - 20px);
		height: 100%;
		z-index: 1;
		border-radius: 10px;
	}

	.coupon-content {
		position: relative;
		z-index: 2;
		height: 100%;
		padding: 15px 20px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		transition: opacity 0.3s;
	}
	
	.coupon-content.selected {
		opacity: 0.8;
	}

	.coupon-top-section {
		display: flex;
		flex-direction: column;
		margin-top: 0;
	}

	.coupon-top {
		display: flex;
		align-items: center;
		margin: 0;
		padding: 0;
	}

	.coupon-limit {
		font-size: 12px;
		color: #ffffff;
	}

	.coupon-main-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
	}

	.coupon-left-part {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}

	.coupon-right-part {
		display: flex;
		align-items: flex-end;
	}

	.coupon-condition {
		font-size: 18px;
		font-weight: bold;
		color: #ffffff;
		margin-top: 5px ;
	}

	.coupon-amount-symbol {
		font-size: 20px;
		color: #ffffff;
		font-weight: bold;
		margin-right: 2px;
		line-height: 1;
	}

	.coupon-amount {
		font-size: 36px;
		color: #ffffff;
		font-weight: bold;
		line-height: 1;
	}

	.coupon-divider {
		height: 1px;
		border-top: 1px dashed rgba(255, 255, 255, 0.5);
		margin: 20px 0 5px 0;
	}

	.coupon-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 2px;
	}

	.coupon-validity {
		font-size: 12px;
		color: #ffffff;
	}

	.coupon-use {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.coupon-use-text {
		font-size: 12px;
		color: #ffffff;
	}
</style>

<style lang="scss">
	/* 全局样式，用于覆盖组件内部样式 */
	.uni-navbar__content {
		border-bottom: none !important;
		border: none !important;
	}
	
	.uni-navbar--border {
		border-bottom: none !important;
		border: none !important;
	}
	
	.uni-navbar__header {
		border-bottom: none !important;
		border: none !important;
	}
</style>

